<template>
  <div class="menuList-container">
    <div class="menuList-left">
      <h3>用户信息</h3>
      <ul>
        <li>单位：{{userInfo&&userInfo.department?userInfo.department:''}}</li>
        <li>姓名：{{userInfo&&userInfo.name?userInfo.name:''}}</li>
        <li>电话：{{userInfo&&userInfo.phone?userInfo.phone:''}}</li>
        <li>手机：{{userInfo&&userInfo.mobile?userInfo.mobile:''}}</li>
      </ul>
    </div>
    <div class="menuList-right">
      <h3>{{titleType|infoTitle}}</h3>
      <ul v-if="(titleType!='6'&&titleType!='7')">
        <li @click="$router.push('/menuDetail/'+item.Id)" :key="i" v-for="(item,i) in newsList">
          <a>{{item.Title}}</a>
          <span>{{item.CreatedAt.substring(0, 10).replace(/-/g,"/")}}</span>
        </li>
      </ul>
      <ul v-else-if="titleType=='6'">
        <li @click="reportRouter(item.Url)" :key="i" v-for="(item,i) in dataReport">
          <a>{{item.Title}}</a>
        </li>
      </ul>
      <ul v-else-if="titleType=='7'">
        <li @click="reportRouter(item.Url)" :key="i" v-for="(item,i) in reportAnalysis">
          <a>{{item.Title}}</a>
        </li>
      </ul>
      <div class="menuList-page" v-if="(titleType!='6'&&titleType!='7')">
        <span>共&nbsp; {{total}} &nbsp;页 当前为第 &nbsp;{{pageIndex}}&nbsp; 页</span>
        <a @click="pageTo('1')">首页</a>
        <a @click="pageTo('less')">上一页</a>
        <a @click="pageTo('add')">下一页</a>
        <a @click="pageTo(total)">尾页</a>
        <span>跳至第
          <select v-model="pageIndex" @change="getNewsList()">
            <option :key="n" :value="n" v-for="n in total">{{n}}</option>
          </select>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      titleType: 1,
      pageSize: 15,
      pageIndex: 1,
      count: 0,
      total: 1,
      titles: ['通知公告', '节能动态', '情况通报', '政策法规', '节能知识'],
      newsList: [],
      dataReport: [
        { Title: '临安区公共机构能源消耗情况调查明细表', Url: '/energy' },
        { Title: '临安区公共机构车辆基本信息管理表', Url: '/car' },
        { Title: '临安区公共机构公务用车油耗情况统计表', Url: '/oilCar' },
        { Title: '临安区公共机构能源消耗报表', Url: '/energyApply' },
        { Title: '临安区公共机构数据中心机房能源消耗申请表', Url: '/computerEnergy' }
      ],
      reportAnalysis: [
        { Title: '能源消耗申报汇总表', Url: '/energySummary' },
        { Title: '公务用车油耗情况汇总', Url: '/oilCollect' },
        { Title: '水能源消耗柱状分析图', Url: '/homeReport/WaterTotal/WaterAmount' },
        { Title: '电能源消耗柱状分析图', Url: '/homeReport/ElectricityTotal/ElectricityAmount' },
        { Title: '车辆用油能源消耗柱状分析图', Url: '/carReport' },
        { Title: '燃气能源消耗柱状分析图', Url: '/homeReport/GasTotal/GasAmount' },
        { Title: '燃料用油能源消耗柱状分析图', Url: '/homeReport/DieselTotal/DieselAmount' },
        { Title: '燃煤能源消耗柱状分析图', Url: '/homeReport/CoalTotal/CoalAmount' },
      ]
    }
  },
  filters: {
    infoTitle: function(val) {
      return {
        1: '通知公告',
        2: '节能动态',
        3: '情况通报',
        4: '政策法规',
        5: '节能知识',
        6: '数据申报',
        7: '报表分析'
      }[val]
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.titleType = ''
    this.count = 0
    this.total = 1
    this.pageIndex = 1
    this.titleType = to.params.newsType
    next();
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      this.newsList = []
      if (this.titleType != '6' || this.titleType != '7') {
        const newsTitle = this.titles[this.titleType - 1]
        const result = await this.$get('/api/News', { category: newsTitle, pageSize: this.pageSize, pageIndex: this.pageIndex })
        this.count = result.Count
        this.newsList = result.Data
        this.total = Math.ceil(result.Count / this.pageSize)
      }
    },
    pageTo(num) {
      if (num == 'less') {
        this.pageIndex--
        this.pageIndex = (this.pageIndex < 0 || this.pageIndex == 0) ? 1 : this.pageIndex;
      }
      else if (num == 'add') {
        this.pageIndex++
        this.pageIndex = (this.pageIndex = this.total || this.pageIndex > this.total) ? this.total : this.pageIndex;
      } else {
        this.pageIndex = num;
      }
      this.getNewsList()
    },
    reportRouter(url) {
      if (this.userInfo && this.userInfo.name) {
        this.$router.push(url)
      } else {
        alert('该功能需登录后使用！')
      }
    }
  },
  created() {
    this.titleType = this.$route.params.newsType
    this.getNewsList()
    try {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    } catch (error) {

    }
  }
}
</script>
<style lang="scss" scoped>
.menuList-container {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  justify-content: space-between;
  .menuList-left {
    width: 235px;
    border: 1px solid #bbdbf7;
    height: 560px;
    h3 {
      width: 233px;
      height: 35px;
      padding-left: 18px;
      line-height: 35px;
      background: url("../../static/lzbg5.gif") no-repeat 5px;
      background-size: 8px 8px;
      background-color: #E7F3FF;
      color: #336699;
    }
    ul {
      width: 234px;
      padding: 5px 15px;
      li {
        height: 35px;
        line-height: 35px;
        border-bottom: 1px dashed #bbdbf7;
        padding-left: 8px;
        background: url("../../static/lzbg10.gif") no-repeat left;
        background-size: 3px 5px;
      }
    }
  }
  .menuList-right {
    width: 735px;
    border: 1px solid #bbdbf7;
    height: 560px;
    h3 {
      width: 100%;
      height: 35px;
      line-height: 35px;
      padding-left: 18px;
      background: url("../../static/lzbg5.gif") no-repeat 5px;
      background-size: 8px 8px;
      background-color: #E7F3FF;
      color: #336699;
    }
    ul {
      width: 100%;
      padding: 5px 15px;
      li {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px dashed #bbdbf7;
        padding-left: 10px;
        background: url("../../static/lzbg10.gif") no-repeat left;
        background-size: 3px 5px;
        a {
          display: inline-block;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          &:hover {
            color: #0000FF;
            cursor: pointer;
            text-decoration: underline;
          }
        }
        span {
          width: 100px;
          text-align: right;
          font-size: 12px;
        }
      }
    }
  }
}

.menuList-page {
  margin-top: 20px;
  padding: 0 20px;
  span {
    margin-right: 15px;
  }
  a {
    margin-right: 15px;
    &:hover {
      color: #0000FF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
</style>
